/**
 * 间距工具类
 *
 * 宽高类：
 * w-[full|half|auto|screen] - 宽度
 * h-[full|half|auto|screen] - 高度
 *
 * 间距类：
 * m-[size] - 外边距
 * m-[t|r|b|l|x|y]-[size] - 方向外边距
 * p-[size] - 内边距
 * p-[t|r|b|l|x|y]-[size] - 方向内边距
 *
 * size: 10-50 常用尺寸值
 */

@import '@/styles/abstracts/_variables.scss';

// 类型映射 - 宽高
$dimensions: (
  'w': 'width',
  'h': 'height',
  'min-w': 'min-width',
  'min-h': 'min-height',
);

// 特殊尺寸映射 - 宽高
$special-sizes: (
  'full': 100%,
  'half': 50%,
  'auto': auto,
);

// 视口尺寸映射 - 宽高
$viewport-sizes: (
  'w': 100vw,
  'h': 100vh,
  'min-w': 100vw,
  'min-h': 100vh,
);

// 尺寸映射 - 内外边距
$sizes: $spacing-sizes;

// 类型映射 - 内外边距
$types: (
  'm': 'margin',
  'p': 'padding',
);

// 方向映射 - 内外边距
$directions: (
  't': 'top',
  'r': 'right',
  'b': 'bottom',
  'l': 'left',
  'x': (
    'left',
    'right',
  ),
  'y': (
    'top',
    'bottom',
  ),
);

// 生成宽高类
// 遍历 $dimensions 中的每个键值对，$dim 是键，$property 是值
@each $dim, $property in $dimensions {
  .#{$dim} {
    // 遍历 $special-sizes 中的每个键值对，$size 是键，$value 是值
    @each $size, $value in $special-sizes {
      &-#{$size} {
        #{$property}: $value;
      }
    }

    // 生成视口宽高类
    &-screen {
      #{$property}: map-get($viewport-sizes, $dim);
    }
  }
}

// 生成间距类
@each $type, $property in $types {
  .#{$type} {
    // 生成全方向类
    @each $size in $sizes {
      &-#{$size} {
        #{$property}: #{$size}rpx;
      }
    }

    // 生成方向类
    @each $dir, $value in $directions {
      @each $size in $sizes {
        &-#{$dir}-#{$size} {
          // 判断是否是组合方向（x,y）
          @if type-of($value) == 'list' {
            @each $v in $value {
              #{$property}-#{$v}: #{$size}rpx;
            }
          } @else {
            // 单一方向，直接使用
            #{$property}-#{$value}: #{$size}rpx;
          }
        }
      }
    }
  }
}
